<template>
    <div class="bui-box slide" :class="[error ? 'slide-hidden' : '']">
        <slide-list class="bui-left" :slideList="slideList" :autoplay="true" :autoplaySpeed="5000"></slide-list>
        <slide-tab class="bui-right" :slideList="slideList"></slide-tab>
    </div>
</template>

<style lang="less">
    .slide {
        margin-bottom: 6px;

        &-hidden {
            display: none;
        }
    }
</style>

<script>
  import reqwest from 'reqwest'
  import slideList from './slide-list.vue'
  import slideTab from './slide-tab.vue'

  export default {
    name: '',
    props: {},
    data () {
      return {
        slideList: [],
        error: false
      }
    },
    mounted () {
      reqwest({
        url: '/api/pc/focus/',
        method: 'get',
        success: (rs) => {
          if (rs.message === 'success') {
            var data = rs.data['pc_feed_focus']

            this.slideList = data.slice(0, 6)

            if (this.slideList.length === 0) {
              this.errorHandle()
            }
          } else {
            this.errorHandle()
          }
        },
        error: () => {
          this.errorHandle()
        }
      })
    },
    methods: {
      errorHandle () {
        this.error = true
      }
    },
    components: {
      slideList,
      slideTab
    }
  }
</script>
